<!--
 * @Author: Bennty
 * @Date: 2024-10-31 16:30:29
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-11-01 11:03:04
 * @Description: 请填写简介
-->
<template>
    <div class="p-2">
        <transition
            :enter-active-class="proxy?.animate.searchAnimate.enter"
            :leave-active-class="proxy?.animate.searchAnimate.leave"
        >
            <div class="search">
                <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="100px" >
                    <el-form-item label="模糊搜索" prop="workName">
                        <el-input v-model="queryParams.workName" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </transition>
        <el-card shadow="never">
            <el-table :data="processList" :loading="getProcessListLoading">
                <el-table-column label="工序名" prop="workName" align="center"></el-table-column>
                <el-table-column label="工序编号" prop="workNum" align="center"></el-table-column>
                <el-table-column label="单位" prop="unit" align="center"></el-table-column>
                <el-table-column label="工序状态" align="center">
                    <template #default="scope">
                        <span class="acitved" v-if="scope.row.workStatus == '1'" @click="handleClickStatus(scope.row)">已激活</span>
                        <span class="inactived" v-if="scope.row.workStatus == '2'" @click="handleClickStatus(scope.row)">已禁用</span>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        
        <addProcess :form="form" :visible="addProcessVisible" />
    </div>
</template>

<script setup lang="ts">
import { type FormInstance } from 'element-plus';
import { processFormType, queryProcessType, ProcessVO } from '@/api/sj/warehouse/process/types';
import { queryProcessListApi,updateProcessApi,getProcessDetailApi } from '@/api/sj/warehouse/process';
import addProcess from './components/addProcess.vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const queryFormRef = ref<FormInstance>();

const initForm:processFormType = {
    workName: undefined,
    workNum: undefined,
    unit: undefined,
    sort: undefined,
    workStatus: '1'
};

const data = reactive<pageDataExcludeRuses<processFormType, queryProcessType>>({
    form: {...initForm},
    queryParams: {
        workName: undefined,
        pageSize: 30,
        pageNum: 1
    }
});
const { form, queryParams, rules } = toRefs(data);

const processList = ref<ProcessVO[]>([]);
const totalData = ref(0);
const getProcessListLoading = ref(true);
const addProcessVisible = ref(false);

const queryProcessList = async () => {
    const { rows, total } = await queryProcessListApi(queryParams.value);
    processList.value = rows;
    totalData.value = total;
    getProcessListLoading.value = false;
};

/** 搜索按钮操作 */
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    queryProcessList();
};

const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
};

const handleSubmit = (result: boolean) => {
    if(result){
        queryProcessList()
    };
};

const handleClickStatus = async (row: ProcessVO) => {
    console.log(row);
    if(row.id || row.id == 0){
        await proxy?.$modal.confirm(`是否将工序设置为${row.workStatus == '1'?'禁用':'激活'}?`);
        const submitData: processFormType= {
            id: row.id,
            workName: row.workName,
            workNum: row.workNum,
            unit: row.unit,
            sort: row.sort,
            workStatus: row.workStatus == '1'? '2' : '1'
        };
        const { code } = await updateProcessApi(submitData);
        if(code == 200){
            handleSubmit(true);
        };
    };
};

onMounted(()=>{
    queryProcessList();
});
</script>

<style lang="scss" scoped>
.acitved{
    line-height: 10;
    color:yellowgreen;
    &:hover{
        cursor: pointer;
    }
}
.inactived{
    line-height: 10;
    color:red;
    &:hover{
        cursor: pointer;
    }
}
</style>